<template>
  <div style="height: 50px;line-height: 50px;border-bottom: 1px solid #ccc;display: flex">
    <div style="width:200px;padding-left: 500px;font-weight: bold;color: #2155c2">
      创建问卷
    </div>

  </div>
  <div style="padding-left: 15px;padding-top: 10px">
    <el-row class="mb-4">
      <el-button type="primary" text @click="this.dialogVisible1 = true">新增单选题
        <el-dialog
            v-model="dialogVisible1"
            title="Tips"
            width="30%"
            :before-close="handleClose"
        >
          <el-form ref="form" :model="form1" label-width="80px" :rules="rules">
            <el-form-item label="题目" prop="name">
              <el-input v-model="form1.name"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案A" prop="answer1">
              <el-input v-model="form1.answer1"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案B" prop="answer2">
              <el-input v-model="form1.answer2"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案C" prop="answer3">
              <el-input v-model="form1.answer3"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案D" prop="answer4">
              <el-input v-model="form1.answer4"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click=cancel>取消</el-button>
        <el-button type="primary" @click=submit>
          确认
        </el-button>
      </span>
          </template>
        </el-dialog>
      </el-button>

      <el-button type="primary" text @click="this.dialogVisible2 = true">新增多选题
        <el-dialog
            v-model="dialogVisible2"
            title="Tips"
            width="30%"
            :before-close="handleClose"
        >
          <el-form ref="form" :model="form2" label-width="80px" :rules="rules">
            <el-form-item label="题目" prop="name">
              <el-input v-model="form2.name"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案A" prop="answer1">
              <el-input v-model="form2.answer1"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案B" prop="answer2">
              <el-input v-model="form2.answer2"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案C" prop="answer3">
              <el-input v-model="form2.answer3"></el-input>
            </el-form-item>
            <el-form-item label="请输入答案D" prop="answer4">
              <el-input v-model="form2.answer4"></el-input>
            </el-form-item>
          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取消</el-button>
        <el-button type="primary" @click=submit1>
          提交
        </el-button>
      </span>
          </template>
        </el-dialog>
      </el-button>
      <el-button type="primary" text @click="this.dialogVisible3 = true">新增填空题
        <el-dialog
            v-model="dialogVisible3"
            title="Tips"
            width="30%"
            :before-close="handleClose"
        >
          <el-form ref="form" :model="form3" label-width="80px" :rules="rules3">
            <el-form-item label="题目" prop="name">
              <el-input v-model="form3.name"></el-input>
            </el-form-item>

          </el-form>
          <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取消</el-button>
        <el-button type="primary" @click="submit2">
          提交
        </el-button>
      </span>
          </template>
        </el-dialog>
      </el-button>
      <!--<el-button type="primary" plain >批量导入</el-button>-->
      <el-upload action="http://127.0.0.1:8081/question/import" style="display: inline-block;margin-left: 5px" :on-success="update" :on-error="errimport" :show-file-list="false">
        <el-popconfirm confirm-button-text="下载"
                       cancel-button-text="不用了"
                       :icon="InfoFilled"
                       icon-color="red"
                       title="是否需要下载导入模板？"
                       @confirm="confirmEvent">
          <template #reference>
            <el-button type="success">Excel批量导入 <el-icon style="margin-left: 3px"><upload-filled /></el-icon></el-button>
          </template>
        </el-popconfirm>

      </el-upload>
    </el-row>
  </div>
  <div style="margin: 10px" id="data-table">
    <!--    <div class="header-search">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="Approved by">
              <el-input v-model="formInline.user" placeholder="Approved by"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">Query</el-button>
            </el-form-item>
          </el-form>
        </div>-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="序号" width="160"/>
      <el-table-column prop="name" label="题目" width="160"/>
      <el-table-column prop="type" label="类型" width="160"/>
      <el-table-column prop="answer1" label="选项A" width="130"/>
      <el-table-column prop="answer2" label="选项B" width="130"/>
      <el-table-column prop="answer3" label="选项C" width="130"/>
      <el-table-column prop="answer4" label="选项D" width="130"/>

      <el-table-column fixed="right" label="操作" width="110">

        <template #default="scope">
          <el-button type="text" size="small" @click="removeQuestion(scope.row)">删除</el-button>

        <el-button type="text" size="small" @click="edit">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
  <div style="width:200px;padding-left: 500px;font-weight: bold;color: #2155c2">
    <el-button type="primary" @click="dialogVisible4 = true">提交</el-button>
    <el-dialog
        v-model="dialogVisible4"
        title="Tips"
        width="30%"
        :before-close="handleClose"
    >
      <el-form ref="form" :model="form5" label-width="80px" :rules="rules4">
        <el-form-item label="问卷名" prop="name">
          <el-input v-model="form5.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible4 = false">取消</el-button>
        <el-button type="primary" @click=submitQuestionnaire>
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>


import request from "@/request/request";
import {ElMessage} from "element-plus";
import fileDownload from "js-file-download";

export default {
  name: "index.vue",
  filters: {
    transformQursiotnType(type) {
      return	type === 1 ? '(单选题)' : (type === 2 ? '(多选题)' : '(文本题)')
    }
  },
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      dialogVisible5: false,

      form1: {
        id: '',
        name: '',
        type: '1',
        answer1: '',
        answer2: '',
        answer3: '',
        answer4: ''
      },
      form2: {
        id: '',
        name: '',
        type: '2',
        answer1: '',
        answer2: '',
        answer3: '',
        answer4: ''
      },
      form3: {
        id: '',
        name: '',
        type: '3',
      },
      form4: {
        id: '',
        questionId: '',
        naireId: ''
      },
      form5: {
        id: '',
        name: '',
        state: '关闭',
        username:''
      },
      rules: {
        name: [
          {required: true, message: 'Please input Activity nam'}
        ],
        answer1: [
          {required: true, message: 'Please input Activity name'}
        ],
        answer2: [
          {required: true, message: 'Please input Activity name'}
        ],
        answer3: [
          {required: true, message: 'Please input Activity name'}
        ],
        answer4: [
          {required: true, message: 'Please input Activity name'}
        ]
      },
      rules2: {
        name: [
          {required: true, message: 'Please input Activity nam'}
        ],
        answer1: [
          {required: true, message: 'Please input Activity name'}
        ],
        answer2: [
          {required: true, message: 'Please input Activity name'}
        ],
        answer3: [
          {required: true, message: 'Please input Activity name'}
        ],
        answer4: [
          {required: true, message: 'Please input Activity name'}
        ]
      },
      rules3: {
        name: [
          {required: true, message: 'Please input Activity nam'}
        ]
      },
      rules4: {
        name: [
          {required: true, message: 'Please input Activity nam'}
        ]
      },
      tableData: [],
      username:''
    }

  },
  created() {
    this.load()
    this.getuserName()
  },
  methods: {
    load() {
      request.get("question/showQuestion").then(res => {
        this.tableData = res.data
      })

    },
    getuserName(){ //获取当前用户名
      let token = localStorage.getItem('token')
      this.$http.post("/user/getUserNameByToken",token).then(res=>{
        if(res.statusCode == '200'){
          console.log(res)
          this.username = res.data
        }
      })
    },

    submit() {

      request.post("question/saveQuestion", this.form1).then(res => {
        console.log(res)
      })
      request.post("question/saveConnect", this.form4).then(res => {
        console.log(res)
      })
      this.update()
      this.handleClose()
    },
    submit1() {
      request.post("question/saveQuestion", this.form2).then(res => {
        console.log(res)
      })
      request.post("question/saveConnect", this.form4).then(res => {
        console.log(res)
      })
      this.update()
      this.handleClose()
    },
    submit2() {
      request.post("question/saveQuestion", this.form3).then(res => {
        console.log(res)
      })
      request.post("question/saveConnect", this.form4).then(res => {
        console.log(res)
      })
      this.update()
      this.handleClose()
    },
    submitQuestionnaire() {
      this.form5.username = this.username
      request.post("questionnaire/submitQuestionnaire", this.form5).then(res => {
        console.log(res)
      })
      this.update()
      this.handleClose()
    },
    update() {
      this.$router.go(0)
    },
    removeQuestion(row) {
      request.post("question/removeQuestion", row.id).then((res => {
        console.log(res)
      }))
      this.update()
    },
    handleClose() {
      this.$refs.form.resetFields()
      this.dialogVisible1 = false
      this.dialogVisible2 = false
      this.dialogVisible3 = false
      this.dialogVisible4 = false
      this.dialogVisible5 = false
    },
    cancel() {
      this.handleClose()
    },
    handleSizeChange() {

    },
    handleCurrentChange() {

    },
    confirmEvent(){ //下载导入模板
      this.$http.get("/question/exportMB", {
        responseType: 'arraybuffer'
      }).then((res)=>{
        ElMessage({
          message: '下载成功！',
          type: 'success',
        })
        fileDownload(res,'导入模板_'+ new Date().toLocaleString()+'.xlsx')
      }).catch(()=>{
        ElMessage.error('下载失败！')
      })
    },
  }
}

</script>

<style scoped>
</style>